import Tree from "./tree";
export default function NewPage() {
  const data = [
        {
            id: '1',
            name: 'parent-1',
            selected: false,
            children: [
                {
                    id: '1-1', name: 'child-1-1',
                    selected: false,
                    children: [
                        { id: '1-1-1', name: 'child-1-1-1', selected: false }
                    ]
                }
            ]
        },
        {
            id: '2',
            name: 'parent-2',
            selected: true,
            children: [
                {
                    id: '2-1', name: 'child-2-1',
                    selected: true,
                    children: [
                        { id: '2-1-1', name: 'child-2-1-1', selected: true }
                    ]
                }
            ]
        }
    ]

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
      <div className="max-w-2xl w-full bg-white rounded-lg shadow-md p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">新页面标题</h1>
        <p className="text-gray-600 mb-4">
          这是一个新创建的页面示例。你可以在这里添加任何内容。
        </p>
        <div className="space-y-4">
          <div className="bg-blue-50 p-4 rounded-lg">
            <h2 className="text-xl font-semibold text-blue-800 mb-2">功能区域 1</h2>
            <p className="text-blue-700">这里可以添加你的功能内容</p>
          </div>
          <div className="bg-green-50 p-4 rounded-lg">
            <h2 className="text-xl font-semibold text-green-800 mb-2">功能区域 2</h2>
            <p className="text-green-700">这里可以添加更多功能内容</p>
          </div>
        </div>
        <button className="mt-6 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
          点击按钮
        </button>
      </div>
       <Tree data={data} onChecked={(data) => {
            console.log(data)
        }}></Tree>
    </div>
    
  );
}